<template>
  <!-- 发现音乐 -->
  <div class="recommend-container">
    <div class="recommend-body">
      <!-- 轮播图 -->
      <div class="banner">
        <el-carousel indicator-position="outside" type="card" :interval="5000" height="198px">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.imageUrl" alt="" @click="toTarget(item)" />
            <span>{{ item.typeTitle }}</span>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 推荐歌单 -->
      <router-link to="/find-music/song-group-all" class="title">推荐歌单</router-link>
      <el-row style="margin-top: 35px; margin-left: -12px">
        <!-- 歌单组件 -->
        <SongGroup v-for="item in songGroupList" :key="item.id" :id="item.id" :name="item.name" :pic="item.picUrl" :playCount="item.playCount"></SongGroup>
      </el-row>
      <!-- 独家放送 -->
      <router-link to="/exclusive" class="title">独家放送</router-link>
      <el-row style="margin-top: 35px; margin-left: -13px">
        <Exclusive v-for="item in exclusiveList" :key="item.id" :id="item.id" :pic="item.sPicUrl" :name="item.name"></Exclusive>
      </el-row>
      <!-- 最新音乐 -->
      <router-link to="" class="title">最新音乐</router-link>
      <el-row class="new-music-container" style="margin-top: 35px; margin-bottom: 4px">
        <NewMusic v-for="item in newMusicList" :key="item.id" :id="item.id" :name="item.name" :pic="item.picUrl" :artistsObj="item.song"></NewMusic>
      </el-row>
      <!-- 推荐 MV -->
      <!-- <router-link to="song-group" class="title">推荐MV</router-link> -->
    </div>
  </div>
</template>

<script>
// 按需导入轮播图列表数据
import { getBannerListAPI } from '@/api/bannerAPI.js'
import { getSongGroupListAPI } from '@/api/songGroupAPI.js'
import { getExclusiveStartListAPI } from '@/api/exclusiveAPI.js'
import { getNewMusicListAPI } from '@/api/newMusicAPI.js'

import SongGroup from '@/components/SongGroup/SongGroup.vue'
import Exclusive from '@/components/Exclusive/Exclusive.vue'
import NewMusic from '@/components/NewMusic/NewMusic.vue'

import bus from '@/components/eventBus.js'

export default {
  name: 'Recommend',
  components: {
    SongGroup,
    Exclusive,
    NewMusic
  },
  created() {
    this.initBannerList()
    this.initSongGroupList()
    this.initExclusiveList()
    this.initNewMusicList()
  },
  data() {
    return {
      bannerList: [],
      songGroupList: [],
      exclusiveList: [],
      newMusicList: []
    }
  },
  methods: {
    // 获取轮播图的列表数据
    async initBannerList() {
      const {
        data: { banners: res }
      } = await getBannerListAPI()
      this.bannerList = res
    },
    // 获取歌单的列表数据
    async initSongGroupList() {
      const {
        data: { result: res }
      } = await getSongGroupListAPI()
      this.songGroupList = res
    },
    // 获取独家放送入口的列表数据
    async initExclusiveList() {
      const {
        data: { result: res }
      } = await getExclusiveStartListAPI()
      this.exclusiveList = res
    },
    // 获取最新音乐的列表数据
    async initNewMusicList() {
      const {
        data: { result: res }
      } = await getNewMusicListAPI()
      this.newMusicList = res
    },
    toTarget(item) {
      if (item.targetType === 1) {
        bus.$emit('songId', item.targetId)
      } else if (item.targetType === 10) {
        this.$router.push({
          path: '/album',
          query: {
            id: item.targetId
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.recommend-container {
  .recommend-body {
    position: relative;
    margin: 0 auto;
    width: 1088px;
  }
  // 轮播图
  .banner {
    .el-carousel {
      .el-carousel__item {
        border-radius: 8px;
        /deep/ .el-carousel__mask {
          opacity: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
        span {
          position: absolute;
          right: 0;
          bottom: 0;
          padding: 2px 5px;
          font-size: 13px;
          color: #fff;
          background-color: #cc4a4a;
          border-top-left-radius: 8px;
        }
      }
      /deep/ .el-carousel__button {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background-color: #e6e6e6;
      }
      /deep/ .el-carousel__indicators--outside button {
        opacity: 1;
      }
      /deep/ .el-carousel__indicator.is-active button {
        background-color: #ec4141;
      }
    }
  }
}
.title {
  position: absolute;
  left: 0;
  font-size: 20px;
  font-weight: 700;
  &:hover {
    color: #000;
  }
}
// 推荐歌单
/deep/ .song-group-box-card {
  float: left;
  margin-left: 12px;
  margin-bottom: 20px;
}
// 独家放送
/deep/ .exclusive-box-card {
  float: left;
  margin-left: 13px;
  margin-bottom: 20px;
}
// 最新音乐
.new-music-container {
  display: flex;
  flex-flow: column wrap;
  height: 262px;
  /deep/ .new-music-box-card {
    margin-bottom: 16px;
  }
}
</style>
